<!DOCTYPE html>
<html>

<body>

    <canvas id="myCanvas" width="10" height="10" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var canvas_context = canvas.getContext("2d");
        var canvas_buffer = canvas_context.getImageData(0, 0, canvas.width, canvas.height);
        var canvas_pitch = canvas_buffer.width * 4;

        console.log(canvas_buffer);
        // The PutPixel() function.
        var PutPixel = function (x, y, color) {
            x = canvas.width / 2 + x;
            y = canvas.height / 2 - y - 1;

            if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
                return;
            }

            var offset = 4 * x + canvas_pitch * y;
            canvas_buffer.data[offset++] = color[0];
            canvas_buffer.data[offset++] = color[1];
            canvas_buffer.data[offset++] = color[2];
            canvas_buffer.data[offset++] = 255; // Alpha = 255 (full opacity)
        }


        // for (let i = 0; i < canvas.width; i++) {
        //     for (let j = 0; j < canvas.height; j++) {
        //         PutPixel(i, j, [255, 0, 255]);   
        //     }
        // }
        PutPixel(0, 0, [0, 0, 255]);
        PutPixel(4, 4, [0, 0, 255]);
        PutPixel(-4, -4, [0, 0, 255]);
        PutPixel(-5, -5, [0, 0, 255]);
        // PutPixel(3, 1, [0, 0, 255]);
        // PutPixel(3, -1, [0, 0, 255]);
        // PutPixel(-3, -1, [0, 0, 255]);
        canvas_context.putImageData(canvas_buffer, 0, 0);

        console.log(canvas_buffer);
        // canvas.width = canvas.width;
        // for (let i = 0; i < canvas.width; i++) {
        //     str = ""
        //     for (let j = 0; j < canvas.height; j++) {
        //         str =  canvas_buffer
        //     }
        // }

    </script>

</body>

</html>